<template lang="html">
  <div class="wrapper">
    <header class="header" ref="header">
      <a class="header-left">
        <i class="iconfont icon-return"></i>
      </a>
      <div class="header-center header-opacity" :style="{opacity: opacity}">
        <span>商品详情</span>
      </div>
      <a class="header-right">
        <i class="iconfont icon-homepage"></i>
      </a>
    </header>
    <main class="main">
      <!-- swiper -->
      <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../assets/images/phone/CnQOjVeqmcKAcTu2AATg1-vazac206.png480x480.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../../assets/images/phone/Cix_s1eqmcGAcfvUAAvXg1CZLVk391.png480x480.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../../assets/images/phone/Cix_s1eqmcCAVZGcAAZVnIzEP88587.png480x480.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination" id="swiper-pagination"></div>
      </div>
      <!-- prod -->
      <div class="prod" ref="prod">
        <!-- prod-info -->
        <section class="prod-info">
          <div class="prod-info-header">
            <h1 class="vm-title">蔚蓝E</h1>
          </div>
          <div class="prod-info-price">
            <div class="mod-price">
              <small>¥ </small><span class="vm-money">999.00</span>
            </div>
          </div>
          <div class="prod-info-installment">
            分期价 ￥<span class="vm-price">98.45</span>x<span class="vm-period">12</span>期<span class="vm-rate"></span>
          </div>
          <div class="prod-info-message">
            <p class="active">32G香槟金版现货，其它版本预售15天内发货</p>
          </div>
        </section>
        <!-- prod-service -->
        <section class="prod-service">
          <ul>
            <li><i class="iconfont icon-success"></i>花呗分期</li>
            <li><i class="iconfont icon-success"></i>顺丰包邮</li>
            <li><i class="iconfont icon-success"></i>7天无理由退货</li>
          </ul>
          <i class="iconfont icon-enter"></i>
        </section>
        <!-- prod-selected -->
        <section class="prod-selected">
          <label>已选</label>
          <p>
            <span class="vm-props s-selected">全网通公开版,香槟金,3GB+16GB,官方标配</span>
            <span class="vm-quantity">×1</span>
          </p>
          <i class="iconfont icon-enter"></i>
        </section>
        <!-- prod-suda -->
        <section class="prod-suda">
          <!--去掉百城判断-->
          <div class="prod-suda-selector">
              <label>配送</label>
              <span class="">广东 广州市</span>
              <i class="iconfont icon-enter" id="J_prodPromoEnter"></i>
          </div>
          <div class="prod-suda-info" id="J_siteStatus" style="display: none;"></div>
          <!---->
          <div class="prod-suda-supplier">
            <p class="mod-bd">
              本商品由<em>魅族</em>负责发货并提供售后服务
            </p>
          </div>
        </section>
        <!-- prod-addition -->
        <section class="prod-addition"></section>
      </div>
      <!-- content -->
      <div class="content" id="content" ref="content">
        <nav class="content-nav" id="contentNav" ref="contentNav" :class="{'fixed': navFixed}">
          <a :class="{'active': type === 1}" href="javascript:void(0);" @click="changeType({id:1})">图文详情</a>
          <a :class="{'active': type === 2}" href="javascript:void(0);" @click="changeType({id:2})">规格参数</a>
          <a :class="{'active': type === 3}" href="javascript:void(0);" @click="changeType({id:3})">常见问题</a>
        </nav>
        <div class="content-inner" ref="contentInner">
          <!-- description -->
          <div class="description" id="description">
            <div class="container">
              <article class="desc-pictures">
                <img src="../../assets/images/desc/Cgbj0FnCFjaAKx42AAliRFnKYG4117.png">
                <img src="../../assets/images/desc/Cgbj0FnCFjaAByhOAATP-I6ekWo338.png">
                <img src="../../assets/images/desc/Cgbj0VnCFjaAd-aGAAhHxpuQKE0990.png">
                <img src="../../assets/images/desc/Cgbj0VnCFjeAZuyOAASNhiQrhCU388.png">
                <img src="../../assets/images/desc/Cgbj0FnCFjeAK5-hAA4mn2fVQlI684.png">
                <img src="../../assets/images/desc/Cgbj0VnCFjiAJ6NmAARbNLc-Jy8770.png">
                <img src="../../assets/images/desc/Cgbj0FnCFjmAER-iAAl2KPnqEzY873.png">
                <img src="../../assets/images/desc/Cgbj0FnHwWyAay97AACL2cj1VPI080.jpg">
                <!-- <img class="be-lazy" src="mall.res.meizu.com/detail/img/blank.png" data-src="openfile.meizu.com/group1/M00/02/2E/Cgbj0VnCFjiAJ6NmAARbNLc-Jy8770.png">
                <img class="be-lazy" src="mall.res.meizu.com/detail/img/blank.png" data-src="openfile.meizu.com/group1/M00/02/20/Cgbj0FnCFjmAER-iAAl2KPnqEzY873.png">
                <img class="be-lazy" src="mall.res.meizu.com/detail/img/blank.png" data-src="openfile.meizu.com/group1/M00/02/30/Cgbj0FnHwWyAay97AACL2cj1VPI080.jpg"> -->
              </article>
            </div>
          </div>
          <!-- standard -->
          <div class="standard" id="standard">
            <div class="container">
              <table>
                <tbody>
                  <tr class="standard-table-group">
                    <th colspan="2">基本信息</th>
                  </tr>
                  <tr>
                    <th>品牌</th>
                    <td>魅族</td>
                  </tr>
                  <tr>
                    <th>型号</th>
                    <td>魅蓝6</td>
                  </tr>
                  <tr>
                    <th>尺寸</th>
                    <td>148.2*72.8*8.3mm</td>
                  </tr>
                  <tr>
                    <th>电池容量</th>
                    <td>3070mAh</td>
                  </tr>
                  <tr>
                    <th>重量</th>
                    <td>143g</td>
                  </tr>
                  <tr class="standard-table-group">
                    <th colspan="2">屏幕</th>
                  </tr>
                  <tr>
                    <th>屏幕尺寸</th>
                    <td>5.2英寸</td>
                  </tr>
                  <tr>
                    <th>对比度</th>
                    <td>1000:1</td>
                  </tr>
                  <tr>
                    <th>分辨率</th>
                    <td>1280 x 720</td>
                  </tr>
                  <tr>
                    <th>PPI</th>
                    <td>282</td>
                  </tr>
                  <tr>
                    <th>亮度</th>
                    <td> 450cd/m²（典型值）</td>
                  </tr>
                  <tr>
                    <th>制造工艺</th>
                    <td>GFF 方案（全贴合）</td>
                  </tr>
                  <tr class="standard-table-group">
                    <th colspan="2">容量</th>
                  </tr>
                  <tr>
                    <th>运行内存（RAM）</th>
                    <td>2GB（仅限16G版本）、3GB（仅限32G版本）</td>
                  </tr>
                  <tr>
                    <th>机身内存</th>
                    <td>16GB<br>32GB</td>
                  </tr>
                  <tr class="standard-table-group">
                		<th colspan="2">
                			处理器
                		</th>
                	</tr>
                	<tr>
                		<th>CPU</th>
                		<td>MT6750处理器</td>
                	</tr>
                	<tr>
                		<th>GPU</th>
                		<td>ARM Mali-T860图形处理器</td>
                	</tr>
                	<tr>
                		<th>CPU频率</th>
                		<td>ARM®&nbsp;Cortex®-A53™ 1.5 GHz x4 +<br>ARM® Cortex®-A53™ 1.0GHz x4</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			摄像
                		</th>
                	</tr>
                	<tr>
                		<th>前置摄像头</th>
                		<td>800万像素<br>ƒ/2.0 光圈<br>4 片式镜头<br>ArcSoft® 美颜算法 自适应美肤技术<br>Face AE 自动人脸识别 亮度增强</td>
                	</tr>
                	<tr>
                		<th>后置摄像头</th>
                		<td>1300万像素<br>ƒ/2.2 光圈<br>5 片式镜头<br>连拍模式<br>全景模式<br>自动对焦系统<br>双色温双闪光灯</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			mTouch
                		</th>
                	</tr>
                	<tr>
                		<th>响应速度</th>
                		<td>0.2s</td>
                	</tr>
                	<tr>
                		<th>识别角度</th>
                		<td>360°</td>
                	</tr>
                	<tr>
                		<th>指纹组数</th>
                		<td>5组</td>
                	</tr>
                	<tr>
                		<th>mTouch传感器</th>
                		<td>电容式触摸传感器</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			运营商与制式
                		</th>
                	</tr>
                	<tr>
                		<th>全网通</th>
                		<td>全网通（公开版、移动定制版、电信版）<br>移动 4G TD-LTE<br>联通/电信 4G TD/FDD-LTE<br>移动 3G TD-SCDMA<br>联通 3G WCDMA<br>电信 3G EVDO<br>移动/联通 2G GSM<br>电信 2G CDMA</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			其他参数
                		</th>
                	</tr>
                	<tr>
                		<th>WLAN功能</th>
                		<td>支持 5GHz 和 2.4GHz 频段<br>802.11 a/b/g/n 无线网络</td>
                	</tr>
                	<tr>
                		<th>蓝牙</th>
                		<td>Bluetooth 4.1<br>支持 BLE</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			多媒体
                		</th>
                	</tr>
                	<tr>
                		<th>视频</th>
                		<td>支持 MP4、3GP、MOV、MKV、AVI、FLV、MPEG 视频格式</td>
                	</tr>
                	<tr>
                		<th>音频</th>
                		<td>支持 FLAC、APE、AAC、MKA、OGG、MIDI、M4A、AMR 音频格式</td>
                	</tr>
                	<tr>
                		<th>图片</th>
                		<td>支持 JPEG、PNG、GIF、BMP 图片格式</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			系统与应用
                		</th>
                	</tr>
                	<tr>
                		<th>系统版本</th>
                		<td>Flyme 6</td>
                	</tr>
                	<tr>
                		<th>传感器</th>
                		<td>重力感应<br>红外距离感应<br>环境光度感应<br>触摸感应<br>电子罗盘<br> 电子陀螺仪</td>
                	</tr>
                	<tr>
                		<th>导航定位</th>
                		<td>GPS<br>A-GPS<br>GLONASS<br>电子罗盘</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			操作环境
                		</th>
                	</tr>
                	<tr>
                		<th>操作环境</th>
                		<td>工作环境温度 0 至 35°C<br>存储温度 -20 至 45°C</td>
                	</tr>
                	<tr class="standard-table-group">
                		<th colspan="2">
                			包装清单
                		</th>
                	</tr>
                	<tr>
                		<th>包装清单</th>
                		<td>主机 x 1<br>电源适配器 x 1<br>保修证书 x 1<br>SIM卡顶针 x 1<br>数据线 x 1</td>
                	</tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- question -->
          <div class="question" id="question">
            <div class="container">
              <div class="question-list">
                <dl class="mod-item">
                	<dt class="vm-question">关于魅蓝6的限购说明。</dt>
                	<dd class="vm-answer">每位用户（包括但不限于联系人、联系方式、地址雷同，均视为同一用户）仅限购买一件魅蓝6，如遇多拍订单只选取一笔订单发货，多拍订单不发货。</dd>
                </dl>
                <dl class="mod-item">
                  <dt class="vm-question">魅蓝 6有哪几种颜色？机身材质？</dt>
                  <dd class="vm-answer">磨砂黑、月光银、电光蓝、香槟金，聚碳酸酯一体机身。</dd>
                </dl>
                <dl class="mod-item">
                  <dt class="vm-question">魅蓝 6 是否支持指纹识别？</dt>
                  <dd class="vm-answer">支持 0.2s 的指纹识别解锁，支付宝和微信的指纹支付。</dd>
                </dl>
                <dl class="mod-item">
                  <dt class="vm-question">
                  魅蓝 6屏幕多大？分辨率是多少？屏幕采用什么制造工艺？</dt>
                  <dd class="vm-answer">5.2 英寸，1280 X 720，制造工艺：GFF 全贴合。</dd>
                </dl>
                <dl class="mod-item">
                  <dt class="vm-question">魅蓝 6 屏幕 PPI 和亮度为多少？</dt>
                  <dd class="vm-answer">282 PPI，亮度：450cd/m²（典型值）</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="fixed-btm footer-summary">
      <div class="mod-action">
        <a href="javascript:void(0);" class="vm-server"><i class="iconfont icon-customerservice"></i><span>客服</span></a>
        <a href="javascript:void(0);" class="vm-favorite"><i class="iconfont icon-collection"></i><span>收藏</span></a>
        <a href="javascript:void(0);" class="vm-cart"><i class="iconfont icon-service"></i><span>购物车</span></a>
      </div>
      <button class="btn hide" type="button" style="display: inline-block; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">加入购物车</button>
      <button class="btn btn-danger" type="button">立即购买</button>
    </footer>
    <div id="go-top" class="go-top" :class="{'active': showGoTop}" @click="goTop()">
      <span class="iconfont icon-packup"></span>
    </div>
  </div>
</template>

<script>
import Swiper from 'Swiper'

export default {
  data () {
    return {
      opacity: 0,
      navFixed: false,
      type: 1,
      showGoTop: false
    }
  },
  methods: {
    // 设置轮播
    setSwiper () {
      let swiper = new Swiper('.swiper-container', {
        loop: true,
        speed: 400,
        spaceBetween: 100,
        pagination : '.swiper-pagination',
      })
    },
    // 滚动条
    setScroll () {
      const top = this.$refs.swiper.offsetTop
      const navTop = this.$refs.content.offsetTop - this.$refs.header.clientHeight

      // 判断
      function func () {
        // 顶部透明
        let scrollY = window.scrollY
        if (scrollY / top > 1) {
          this.opacity = 1;
        } else {
          this.opacity = scrollY / top
        }

        // 固定tab
        if (scrollY >= navTop) {
          this.navFixed = true
        } else {
          this.navFixed = false
        }

        // showGoTop
        if (scrollY >= navTop + 10) {
          this.showGoTop = true
        } else {
          this.showGoTop = false
        }
      }
      // 绑定this
      func.bind(this)()
      window.addEventListener('scroll', () => {
        func.apply(this)
      })
    },
    // goTop
    goTop () {
      window.scroll(0, 0)
    },
    // 切换tab
    changeType (item) {
      const navTop = this.$refs.content.offsetTop - this.$refs.header.clientHeight
      if (this.type !== item.id) {
        const contentInner = this.$refs.contentInner
        let cols = contentInner.children;
        const width = cols[0].clientWidth
        contentInner.style.transform = `translateX(-${(item.id - 1) * width}px)`
        window.scroll(0, navTop)

        // 其他列设置为一定高度，点击列高度设置为auto，减少某一个页面太长，其他页面有空白
        const curHeight = 583 // 此处是写死的高度，因为flex布局已经把每个页面撑大
        for (let i = 0, len = cols.length; i < len; i++) {
          cols[i].style.height = i === item.id - 1
            ? 'auto'
            : `${curHeight}px`
        }

        // finally
        this.type = item.id
      }
    },
    // 左右滑动切换tab
    setSlide () {
      const contentInner = this.$refs.contentInner
      const cols = contentInner.children
      let x, y, X, Y, curOffsetX

      contentInner.addEventListener('touchstart', (e) => {
        x = e.touches[0].pageX
        y = e.touches[0].pageY
        if (contentInner.style.transform) {
          let matchX = contentInner.style.transform.match(/translateX\((-?\d+\.?\d*px)\)/)
          if (matchX) {
            curOffsetX = parseInt(matchX[1])
          }
        } else {
          curOffsetX = 0
        }
        // console.log(curOffsetX)
      })
      contentInner.addEventListener('touchmove', (e) => {
        X = e.touches[0].pageX
        Y = e.touches[0].pageY
        let slideX = X - x
        let slideY = Y - y
        if (this.type === 1 && slideX >= 0) return
        if (this.type === cols.length && slideX <= 0) return
        // 横向滑动
        if (Math.abs(X - x) - Math.abs(Y - y) > 0) {
          let slideX = X - x
          if (slideX > 0) {
            // console.log('右滑')
          } else if (slideX < 0) {
            // console.log('左滑')
          }
          contentInner.style.transform = `translateX(${curOffsetX + slideX}px)`
        }
      })
      contentInner.addEventListener('touchend', (e) => {
        const slideX = X - x
        const distance = 20
        // 右滑动
        if (slideX > distance && this.type - 1 > 0) {
          this.changeType({id: this.type - 1})
        // 左滑动
        } else if (slideX < -distance && this.type < cols.length) {
          this.changeType({id: this.type + 1})
        }
        else if (slideX !== 0 && (slideX < distance || slideX > -distance)) {
          contentInner.style.transform = `translateX(${curOffsetX}px)`
        }
      })
    }
  },
  created () {
    console.log(this.$route.params.id)
  },
  mounted () {
    this.setSwiper()
    this.setScroll()
    this.setSlide()
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.wrapper {
  width: 100%;
  position: relative;
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  z-index: 2;
  .header-left {
    position: absolute;
    left: px2rem(24);
    bottom: px2rem(14);
    z-index: 3;
    padding: px2rem(18.5);
    .iconfont {
      font-size: px2rem(48);
      color: #666;
    }
  }
  .header-opacity {
    opacity: 0;
  }
  .header-center {
    transition: all .3s;
    width: 100%;
    height: px2rem(120);
    line-height: px2rem(120);
    background: $white;
    text-align: center;
    span {
      font-size: 16px;
      display: inline-block;
    }
  }
  .header-right {
    position: absolute;
    right: px2rem(42);
    bottom: px2rem(26);
    z-index: 5;
    padding: px2rem(9);
    border-radius: 50%;
    background: hsla(0,0%,100%,.6);
    .iconfont {
      font-size: px2rem(48);
      color: #666;
    }
  }
}
.main {
  padding-top: px2rem(120);
  overflow: hidden;
  .swiper-container {
    width: 100%;
    height: px2rem(500);
    .swiper-slide {
      text-align: center;
    }
    img {
      height: px2rem(480);
    }
  }
  .prod {
    margin-top: 2px;
    box-shadow: 0 0 1px #eee;
    border-top: 1px solid #e5e5e5;
    background: #eee;
    overflow: hidden;
    font-size: 13px;
    .prod-info {
      position: relative;
      padding: px2rem(35) 0 px2rem(20) px2rem(33);
      background: #fff;
      overflow: hidden;
      .prod-info-header {
        position: relative;
        padding-bottom: px2rem(8);
        .vm-title {
          display: inline-block;
          color: #333;
          font-size: 16px;
          line-height: px2rem(58);
          width: px2rem(720);
          font-weight: 400;
          overflow-wrap: break-word;
          word-break: break-all;
        }
      }
      .prod-info-price {
        position: relative;
        height: px2rem(64);
        line-height: px2rem(64);
        .mod-price {
          display: inline-flex;
          margin-right: px2rem(16);
          color: #f0415f;
          small {
            font-size: 18px;
            margin-right: px2rem(8);
          }
          span {
            font-size: 18px;
            color: #f0415f;
          }
        }
      }
      .prod-info-installment {
        height: px2rem(64);
        line-height: px2rem(64);
        font-size: 14px;
        color: #f0415f;
      }
      .prod-info-message {
        font-size: 13px;
        line-height: px2rem(69);
        color: #999;
        p {
          color: #f0415f;
        }
      }
    }
    .prod-service {
      height: px2rem(125);
      line-height: px2rem(125);
      background: #fff;
      overflow: hidden;
      ul {
        margin-left: px2rem(33);
        padding-right: px2rem(42);
        border-top: 1px solid #e5e5e5;
        display: flex;
        flex-wrap: wrap;
        li {
          display: inline-block;
          margin-right: px2rem(35);
          font-size: 12px;
          color: #999;
          .iconfont {
            vertical-align: -2%;
            margin-right: px2rem(14);
            font-size: 14px;
            color: #00c3f5;
          }
        }
      }
    }
    .prod-selected {
      height: px2rem(125);
      line-height: px2rem(125);
      background: #fff;
      padding-left: px2rem(33.3);
      padding-right: px2rem(62.5);
      margin-top: px2rem(20);
      display: flex;
      p {
        display: inline-block;
        vertical-align: middle;
        .vm-props {
          float: left;
          font-size: 13px;
          overflow: hidden;
          color: #999;
          max-width: px2rem(700);
          text-overflow: ellipsis;
          white-space: nowrap;
          &.s-selected {
            color: #333;
          }
        }
        .vm-quantity {
          position: absolute;
          right: px2rem(97);
          color: #666;
        }
      }
    }
    .prod-suda {
      margin-top: px2rem(20);
      margin-bottom: px2rem(20);
      padding-left: px2rem(33);
      background-color: #fff;
      .prod-suda-selector {
        height: px2rem(118);
        padding-right: px2rem(62.5);
        line-height: px2rem(118);
        border-bottom: 1px solid #e5e5e5;
        display: flex;
      }
      .prod-suda-info {
        padding-top: px2rem(39);
        padding-left: px2rem(104);
        line-height: px2rem(56);
        color: #666;
      }
      .prod-suda-supplier {
        background: #fff;
        .mod-bd {
          padding: px2rem(32) px2rem(50) px2rem(32);
          line-height: px2rem(42);
          color: #999;
          em {
            color: #666;
          }
        }
      }
    }
    label {
      font-size: 13px;
      margin-right: px2rem(33.3);
      color: #999;
      vertical-align: middle;
    }
    .prod-info,
    .prod-service,
    .prod-selected,
    .prod-suda {
      position: relative;
    }
    .prod-service,
    .prod-selected,
    .prod-suda {
      .icon-enter {
        width: 16px;
        height: 16px;
        position: absolute;
        right: px2rem(22);
        top: 0;
        font-size: 16px;
        color: #999;
      }
    }
  }
  .content {
    position: relative;
    background: #fff;
    padding-top: px2rem(105);
    .content-nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 9;
      display: flex;
      justify-content: space-around;
      height: px2rem(105);
      border-bottom: 1px solid #e5e5e5;
      &.fixed {
        position: fixed;
        left: 0;
        top: px2rem(116);
        width: 100%;
        background: #fff;
      }
      &>a {
        color: #666;
        line-height: px2rem(105);
        font-size: 14px;
        text-align: center;
        &.active {
          color: #00c3f5;
        }
      }
    }
    .content-inner {
      display: flex;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0, 0, .25, 1);
      transition-duration: .35s;
      transform: translateZ(0);
      &>div {
        min-width: 100%;
        max-width: 100%;
        margin-bottom: px2rem(120);
        .container {
          padding-top: px2rem(28);
        }
      }
      .description {
        .desc-pictures {
          display: flex;
          flex-direction: column;
          img {
            width: 100%;
          }
        }
      }
      .standard {
        table {
          width: 100%;
          tr {
            border-top: 1px solid #eee;
            &:first-child {
              border: none;
            }
          }
          th {
            width: 36%;
            padding-right: 0;
            color: #999;
            text-align: left;
          }
          th,
          td {
            padding: px2rem(27);
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            vertical-align: top;
          }
        }
        .standard-table-group {
          background: #f5f5f5;
          text-align: left;
        }
      }
      .question {
        .question-list {
          margin-top: px2rem(28);
          .mod-item {
            padding: px2rem(34) px2rem(20) px2rem(34);
            border-top: 1px solid #e5e5e5;
            margin-top: 1px;
            font-size: 12px;
            &:first-child {
              border: none;
            }
            .vm-question {
              position: relative;
              padding-left: px2rem(97);
              font-size: 14px;
              line-height: 2;
              color: #00c3f5;
              &:after {
                content: 'Q：';
                position: absolute;
                left: px2rem(21);
                top: 0;
              }
            }
            .vm-answer {
              position: relative;
              margin-top: px2rem(28);
              padding-left: px2rem(97);
              line-height: 1.8;
              &:after {
                content: 'A：';
                position: absolute;
                left: px2rem(21);
                top: 0;
              }
            }
          }
        }
      }
    }
  }
}
.footer-summary {
  display: flex;
  background: #fff;
  .mod-action {
    display: flex;
    width: px2rem(300);
    border-top: 1px solid #e5e5e5;
    flex: 0 1 1;
    justify-content: space-around;
    margin-left: -1px;
    a {
      width: 50%;
      border-left: 1px solid #e5e5e5;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #999;
      font-size: 12px;
      .iconfont {
        font-size: 15px;
        color: #999;
      }
      i.icon-customerservice {
        color: #00c3f5;
      }
      span {
        line-height: 1;
        padding-top: 2px;
      }
    }
  }
  .btn {
    flex: 1 1 auto;
    line-height: px2rem(100);
  }
}
.fixed-btm {
  z-index: 20;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.fixed-btm {
  z-index: 99;
}
.hide {
  display: none;
}
.btn {
  display: inline-block;
  width: px2rem(27);
  line-height: 1;
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #00c3f5;
}
.btn-danger {
  background: #f0415f;
}
.go-top {
  display: none;
  position: fixed;
  right: px2rem(22);
  bottom: px2rem(180);
  z-index: 2;
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .3);
  justify-content: center;
  align-items: center;
  .iconfont {
    font-size: 30px;
    color: #fff;
  }
  &.active {
    display: flex;
    transform-origin: 0px 0px 0px;
    opacity: 1;
    transform: scale(1, 1);
  }
}
</style>
